<template>
  <t-dialog
    v-model:visible="show"
    :width="1200"
    :header="$t('common.info')"
    :footer="false"
    destroyOnClose
    :closeOnOverlayClick="false"
    class="plugin-order-info"
    placement="center"
  >
    <template #body>
      <div class="content">
        <t-row :gutter="20">
          <t-col :span="8">
            <div class="bg-box" v-if="data.client_id">
              <div class="title">{{ plugin.t('info.client') }}</div>
              <t-row :gutter="50">
                <t-col :span="6">
                  <div class="item wrap">
                    <div class="name">{{ clientPlugin.t('form.code') }}</div>
                    <b>{{ data.client_data.code }}</b>
                  </div>
                  <div class="item wrap">
                    <div class="name">{{ clientPlugin.t('form.name') }}</div>
                    {{ data.client_name }}
                  </div>
                </t-col>
                <t-col :span="6">
                  <div class="item wrap">
                    <div class="name">{{ clientPlugin.t('form.type') }}</div>
                    <t-tag :theme="['default', 'primary', 'warning'][data.client_data.type]" variant="light"> 
                      {{ clientPlugin.t('form.type_text.' + data.client_data.type) }}
                    </t-tag>
                  </div>
                  <div class="item wrap">
                    <div class="name">{{ clientPlugin.t('form.tax') }}</div>
                    {{ data.client_data.tax }}
                  </div>
                </t-col>
                <t-col :span="6">
                  <div class="item wrap">
                    <div class="name">{{ clientPlugin.t('form.city') }}</div>
                    {{ data.client_data.area }} {{ data.client_data.city }}, {{ data.client_data.zip }}
                  </div>
                </t-col>
                <t-col :span="6">
                  <div class="item wrap">
                    <div class="name">{{ clientPlugin.t('form.address') }}</div>
                    {{ data.client_data.address }}
                  </div>
                </t-col>
              </t-row>
            </div>
            <div class="bg-box" style="min-height: 500px; margin:0;">
              <div class="title">{{ plugin.t('info.goods') }}</div>
              <Table :data="data" />
            </div>
          </t-col>
          <t-col :span="4">
            <div class="bg-box">
              <div class="title">{{ plugin.t('info.order') }}</div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.money') }}</div>
                <b>{{ app.money.format(data.money) }}</b>
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.ticket') }}</div>
                <t-tag :theme="{print: 'primary', print_refund: 'primary', ticket: 'warning', ticket_refund: 'warning'}[data.ticket]" variant="light">
                  {{ plugin.t('order.ticket_text.' + data.ticket) }}
                </t-tag>
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.code') }}</div>
                {{ data.code }}
              </div>
              <div class="item wrap" v-if="data.code_key">
                <div class="name">{{ plugin.t('order.code_key') }}</div>
                <span class="color">{{ data.code_key }}</span>
              </div>
              <div class="item wrap" v-if="data.date">
                <div class="name">{{ plugin.t('order.date') }}</div>
                {{ data.date }}
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.outbound') }}</div>
                <t-tag v-if="data.outbound" theme="success" variant="light">
                  {{ plugin.t('order.outbound_unit', data) }}
                </t-tag>
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.time') }}</div>
                {{ app.time.load(data.status_time).date() }}
              </div>
              <t-divider>{{ plugin.t('order.remarks') }}</t-divider>
              <div class="item" style="text-align: left">
                {{ data.remarks }}
              </div>
            </div>
            <div class="bg-box">
              <div class="total" v-if="payStore.getStatus()"><span class="ok">{{ plugin.t('order.pay_status_text.1') }}</span> <b>{{ app.money.format(payStore.getMoney()) }}</b></div>
              <div class="total" v-else><span class="no">{{ plugin.t('order.pay_status_text.0') }}</span> <b>{{ app.money.format(payStore.getRemain()) }}</b></div>
              <div class="title">{{ plugin.t('info.pay') }}</div>
              <Pay />
            </div>
            <Ticket v-model="data" v-if="data.ticket_open == 0 && data.ticket == 'print'" @ok="show = false" />
          </t-col>
        </t-row>
      </div>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../../index'
  import clientIndex from '@/plugin/client/index'
  import payStore from './store'
  import Table from './table.vue'
  import Pay from './pay.vue'
  import Ticket from './ticket.vue'

  const plugin = index.plugin
  const clientPlugin = clientIndex.plugin
  const show = ref(false)
  const data = ref({})

  const open = row => {
    data.value = Object.assign({}, row)
    payStore.init(row)
    show.value = true
  }

  defineExpose({ open })
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-order-info{

    @include table-size(12px);

    .content{
      overflow: hidden;
    }

    .t-dialog{
      background-color: $color-bg;
    }

    .bg-box{
      padding: 25px;
    }

    .title{
      color: $color-title;
      font-size: 16px;
      padding-bottom: 15px; 
      font-weight: bold;
    }

    .total{
      float: right;
      font-size: 14px;

      .no{
        color: $color-warning; 
      }

      .ok{
        color: $color-success;
      }

      b{
        padding-left: 5px;
        color: $color-title;
        font-weight: normal;
      }
    }

    .item{  
      color: $color-title;
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 10px;
      text-align: right;
      
      .name{
        color: $color-body;
        float: left;
        padding-right: 20px;
      }

      a{
        
      }

      span.color{
        color: $color;
      }
    }
  }
</style>